<template>
  <!-- > 目标: 点击生成按钮, 新增一个li(随机数字)和删除按钮, 
点击删除按钮, 删除对应的li和值
> 提示: 数组渲染列表, 生成和删除都围绕数组操作 -->
  <div>
    <ul>
      <!-- 遍历list这个数组   -->
      <!-- item是每一项 index是每一项的下标  每一项唯一标识设置成index 只要改变了index值  就会对比新旧数据 浏览器就会返回虚拟的场景-->
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <!-- 添加点击事件 点击后执行dele  传入一个被选中的实参-->
        <!-- 实际参数index -->
        <button @click="dele(index)">删除</button>
      </li>
    </ul>
    <!-- 给生成按钮添加一个点击事件  点击后执行 generate-->
    <button @click="generate">生成</button>
  </div>
</template>

<script>
export default {
  // 储存数据的地方
  data() {
    return {
      list: [1, 5, 3],
    }
  },
  //
  // 储存方法的地方
  methods: {
    generate() {
      // 在这个数组的尾部添加一个没有小数的随机整数
      this.list.push(Math.floor(Math.random() * 100))
    },
    // 形式参数asd
    dele(asd) {
      // list删除索引为
      // 形式参数asd= 实际参数index=我们按钮的隶属于那个li的index值
      // 删除1个 ↓
      this.list.splice(asd, 1)
    },
  },
}
</script>

<style></style>
